<template>
  <div class="container">
    <div class="header">
      <div class="head-left">
        <div class="a">区域:</div>
        <div class="region">
          <a href="javascript:;" v-for="(item, index) in 25" :key="index">
            全部
          </a>
        </div>
      </div>
      <div class="Introduction"></div>
      <!-- 地图 -->
      <div id="map"></div>
    </div>
    <div class="orderWinehouse">
      <div class="orderWineItem" v-for="item in orderWinehouse" :key="item.id">
        <img :src="item.photos[0].url" alt="" />
        <div class="orderCenter">
          <h3>{{ item.name }}</h3>
          <p>地址:{{ item.adname }}{{ item.address }}</p>
        </div>
        <div class="orderRight">
          收藏
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMap from "AMap";
import { getAddressCenter, getorderWinehouse } from "../../api/addressDetail";
export default {
  name: "AddressDetail",
  data() {
    return {
      addressCenter: "",
      orderWinehouse: [],
      address: "",
    };
  },
  created() {
    if (!this.$route.query.text) {
      this.$router.push({
        name: "OrderWinehouse",
      });
    }
    this.address = this.$route.query.text;
  },

  async mounted() {
    let res = await getAddressCenter(this.address); //获取中心位置的坐标
    if (!res.data.geocodes.length) {
      alert("暂不支持海外服务");
      this.$router.push({
        name: "OrderWinehouse",
      });
      return;
    }
    let address = res.data.geocodes[0].location;
    let res2 = await getorderWinehouse(address, "酒店");
    this.addressCenter = res.data.geocodes[0].location.split(",");

    this.orderWinehouse = res2.data.pois;
    let map = new AMap.Map("map", {
      center: this.addressCenter,
      mapStyle: "amap://styles/map", //设置地图的显示样式
      resizeEnable: true,
      zoom: 15,
      layers: [
        //使用多个图层
        new AMap.TileLayer.Satellite(),
        new AMap.TileLayer.RoadNet(),
      ],
    });
    map.clearMap();
    let markers = this.orderWinehouse
      .filter((item) => {
        return typeof item.entr_location === "string";
      })
      .map((item) => {
        return {
          position: item.entr_location,
          name: item.name,
        };
      });
    //添加坐标
    markers.forEach(function(item) {
      let position = item.position.split(",");
      var marker = new AMap.Marker({
        position: new AMap.LngLat(position[0], position[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: item.name,
      });
      map.add(marker);
    });
  },
};
</script>

<style>
.container {
  width: 1000px;
  margin: auto;
}
#map {
  width: 400px;
  height: 250px;
}
.head-left {
  display: flex;
  height: 100px;
}
.header {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
  height: 300px;
}
.region {
  display: flex;
  width: 500px;
  height: 100px;
  flex-wrap: wrap;
}
.region a {
  color: #666;
  text-decoration: none;
  width: 60px;
  text-align: center;
}
.region a:hover {
  color: white;
  background-color: orange;
  border-radius: 5px;
}
.orderWineItem {
  height: 200px;
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.orderWineItem img {
  width: 330px;
  height: 100%;
  border-radius: 6px;
}
.orderWineItem .orderCenter {
  padding-left: 20px;
  width: 315px;
  height: 100%;
  flex-grow: 1;
}
.orderWineItem .orderRight {
  width: 300px;
  height: 100%;
  flex-grow: 1;
  text-align: right;
}
</style>
